<template>
    <el-form :inline="true">
        <el-form-item>
            <el-button type="back" icon="back" @click="back()">返回班级管理</el-button>
            <el-button type="danger" icon="Delete" @click="deleteStudent(multipleTableRef)">批量删除</el-button>
        </el-form-item>
    </el-form>

    <!-- 模糊查询开始 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="当前班级:" style="align-items: center;">{{ $route.query.className }}</el-form-item>
        <el-form-item label="学号: ">
            <el-input v-model="formInline.studentId" placeholder="请输入学号" clearable />
        </el-form-item>
        <el-form-item label="姓名:">
            <el-input v-model="formInline.name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button @click="reset">重置</el-button>
        </el-form-item>
    </el-form>
    <!-- 模糊查询结束 -->

    <!-- 列表渲染开始 -->
    <el-table ref="multipleTableRef" v-loading="loading" style="width: 100%" :data="tableData"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" width="55" align="center">
            <template v-slot="scope">
                {{ (page - 1) * size + scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column property="studentId" width="100" label="学号" align="center" />
        <el-table-column property="name" label="姓名" width="120" align="center" />
        <el-table-column property="statusGraduationTime" label="毕业时间" width="100" align="center">
            <template v-slot="scope">
                {{ scope.row.statusGraduationTime === null ? '-' : scope.row.statusGraduationTime }}
            </template>
        </el-table-column>
        <el-table-column property="workCity" label="工作城市" width="100" align="center" />
        <el-table-column property="workCompany" label="工作公司" min-width="50" align="center" />
        <el-table-column property="workPosition" label="工作岗位" min-width="50" align="center" />
        <el-table-column property="startDate" label="入职时间" min-width="50" align="center" />
        <el-table-column property="endDate" label="离职时间" width="100" align="center">
            <template v-slot="scope">
                {{ scope.row.endDate === null ? '-' : scope.row.endDate }}
            </template>
        </el-table-column>
        <el-table-column property="salary" label="薪资" min-width="50" align="center" />
        <el-table-column label="操作" fixed="right" min-width="80" align="center">
            <template v-slot="scope">
                <el-link type="primary" icon="edit" style="margin-right: 10px"
                    @click="showUpdate(scope.row)">修改</el-link>
                <el-link type="danger" icon="delete" style="margin-right: 10px"
                    @click="deleteStudent(scope.row.id)">删除</el-link>
            </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block" style="margin-top: 20px">
        <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[5, 10, 15, 20]" :total="total"
            :background="true" layout="total, sizes, prev, pager, next" @current-change="handleCurrentChange"
            @size-change="handleSizeChange" />
    </div>
    <!-- 修改学生就业信息 -->
    <UpdateEmploymentView v-if="updateDialog" v-model:updateDialog="updateDialog"
        @loadEmploymentData="loadEmploymentData()" :rowData="rowData" />
</template>

<script setup>
import { ref, onMounted, reactive } from "vue"
import axios from "@/axios/index.js"
import { ElMessageBox, ElMessage, ElTable } from "element-plus"
import UpdateEmploymentView from "./UpdateEmploymentView.vue"
import { useRoute } from "vue-router"
import router from "@/router"

const route = useRoute()

const loading = ref(true)
const multipleTableRef = ref()
const tableData = ref([])
let rowData = ref([])
let updateDialog = ref(false)
const page = ref(1) //当前页
const size = ref(5) //每页显示条数
const total = ref(100) //总记录数
let loadingClass = ref(true)


let Permissions = ref()
//修改菜单
function showUpdate(row) {
    if (Permissions.value == 0) {
        ElMessage({
        type: "error",
        message: "无权操作",
            })
        return
    }
    rowData.value = row
    updateDialog.value = true

}

//条件模糊搜索
function onSubmit() {
    loadEmploymentData()
}

//切换size
function handleSizeChange(sizeInfo) {
    size.value = sizeInfo
    loadEmploymentData()
}

//切换页面
function handleCurrentChange(pageInfo) {
    page.value = pageInfo
    loadEmploymentData()
}

//模糊搜索表单
const formInline = ref({
    studentId: "",
    name: "",
    classId: "",
})

//初始化
onMounted(async () => {

    
    const { classId, isPermissions } = route.query

    Permissions.value = isPermissions
    
    
    formInline.value.classId = +classId
    await loadEmploymentData()
})

//多选框点击添加数据
function handleSelectionChange(id) {
    multipleTableRef.value = id
}

//清空模糊搜索框
let reset = function () {
    formInline.value.studentId = "",
        formInline.value.name = ""
    onSubmit()
}

//返回
function back() {
    if (route) {
        router.push({ path: '/classManagement' })
    }
}

//批量删除按钮
let deleteStudent = function (id) {
    if (Permissions.value == 0) {
        ElMessage({
        type: "error",
        message: "无权操作",
            })
        return
    }
    if (Permissions.value == 0) {
        ElMessage({
        type: "error",
        message: "无权操作",
            })
        return
    }
    let ids = ref([])
    if (typeof id === "number") {
        ids.value.push(id)
    } else {
        for (let i = 0; i < id.length; i++) {
            ids.value.push(id[i].id)
        }
    }
    if (ids.value.length === 0) {
        ElMessage({
                type: "error",
                message: "未选择删除的信息",
            })
            return
    }
    ElMessageBox.confirm("该操作将永久删除数据,请确认是否继续操作?", "Warning", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        axios.delete(`/employment/deleteByIds`, {
            params: {
                ids: ids.value.join(",")
            }
        }).then((response) => { // 使用 DELETE 方法  
            ElMessage({
                type: "success",
                message: "删除成功",
            })
            loadEmploymentData(page.value, size.value) // 确保 page 和 size 已被定义  
        }).catch((error) => {
            ElMessage({
                type: "error",
                message: "删除失败: " + error.message,
            })
        })
    }).catch(() => {
        // 用户点击了取消  
    })
}

let classList = []


//获取班级列表
axios.get('/api/v1/class/getClassList').then(resp => {
    loadingClass.value = true
    classList = resp.data.data.data
    loadingClass.value = false
})

//获取学生就业列表
async function loadEmploymentData() {
    axios.get("/employment/selectAll", {
        params: {
            current: page.value,
            size: size.value,
            ...formInline.value
        }
    }).then(resp => {
        tableData.value = resp.data.data.records
        total.value = resp.data.data.total
        loading.value = 
        
        console.log(resp.data.data);
        
    })
}


</script>

<style lang="less" scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>